<!--
 * @Author: zhangyang
 * @Date: 2021-02-26 11:49:25
 * @LastEditTime: 2021-12-31 17:25:24
 * @Description: 节点列表
-->
<template>
  <div class="index">
    <div class="caozuoFat">
      <el-button type="primary" plain @click="add(0)">添加一级节点</el-button>
    </div>
    <!-- 节点列表 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px;"
      :tree-props="{ children: 'part', hasChildren: 'hasChildren' }"
      row-key="autoid"
      :expand-row-keys="[...expandKeys]"
      @expand-change="expandChange"
    >
      <el-table-column prop="node_name" label="节点名称" width="240" />
      <el-table-column prop="autoid" label="ID" />
      <el-table-column prop="parent_id" label="父节点" />
      <el-table-column prop="node_path" label="路径" />
      <el-table-column prop="node_desc" label="节点描述" />
      <el-table-column prop="is_show" label="隐藏/显示">
        <template #default="scope">
          <el-switch
            v-model="scope.row.is_show"
            :active-value="1"
            :inactive-value="0"
            active-color="#409EFF"
            inactive-color="#909399"
            disabled
          />
        </template>
      </el-table-column>
      <el-table-column prop="node_type" label="节点级别" />
      <el-table-column label="操作" width="300">
        <template #default="scope">
          <el-button @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="del(scope.row)">删除</el-button>
          <el-button
            v-if="scope.row.node_type < 4"
            type="success"
            plain
            @click="add(scope.row)"
          >添加子节点</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加 / 编辑 -->
    <young-dialog
      width="370px"
      :is-add="isAdd"
      :is-edit="isEdit"
      @sure="sure"
      @clear="clear"
    >
      <template #body>
        <el-form :model="form" label-width="80px">
          <el-form-item label="节点名称">
            <el-input v-model="form.node_name" />
          </el-form-item>
          <el-form-item label="节点描述">
            <el-input v-model="form.node_desc" />
          </el-form-item>
          <el-form-item label="节点路径">
            <el-input v-model="form.node_path" />
          </el-form-item>
          <el-form-item label="排序(升序)">
            <el-input v-model.number="form.node_sort" />
          </el-form-item>
          <el-form-item label="显示|隐藏">
            <el-radio v-model="form.is_show" :label="0">隐藏</el-radio>
            <el-radio v-model="form.is_show" :label="1">显示</el-radio>
          </el-form-item>
          <el-form-item label="父节点ID">
            <el-input v-model="form.parent_id" disabled />
          </el-form-item>
        </el-form>
      </template>
    </young-dialog>
  </div>
</template>

<script lang="ts" setup>
import { getNodeList, addNode, editNode, delNode } from '../../api/system';
import useFormMode from '../../hooks/useFormMode';
import { SYSTEM_OPEN_KEYS } from '../../store';
const FORM_TEMP: AddNodeItem = {
  autoid: 0,
  node_name: '',
  node_desc: '',
  node_path: '',
  node_sort: 0,
  is_show: 1,
  parent_id: 0
};
// key 的类型必须为 string 才会生效！！！
const expandKeys = ref<Set<string>>(new Set());
let tempArr: string[] = [];
const getFatherAndSon = (arr: NavArrItem[], num?: number): string[] => {
  if (num === 1) {
    tempArr = [];
  }
  for (const item of arr) {
    tempArr.push(item.autoid + '');
    if (isArray(item.part) && item.part.length > 0) {
      getFatherAndSon(deepClone(item.part));
    }
  }
  return tempArr;
};
const expandChange = (...args: any) => {
  const [row, isOpen] = args as [NavArrItem, boolean];
  const autoid = row.autoid;
  if (isOpen) {
    expandKeys.value.add(autoid + '');
  } else {
    const allSub = getFatherAndSon([row], 1);
    allSub.forEach((v) => expandKeys.value.delete(v));
  }
};
const tableData = ref<NavArrItem[]>([]);
/**
 * 获取节点列表
 */
const getList = async () => {
  SYSTEM_OPEN_KEYS.value = [...expandKeys.value];
  const temp = await getNodeList();
  // @ts-ignore
  tableData.value = deepClone(temp);
  expandKeys.value = new Set(SYSTEM_OPEN_KEYS.value);
};

const {
  isAdd,
  isEdit,
  form,
  edit,
  del,
  sure,
  clear
} = useFormMode<AddNodeItem>(FORM_TEMP, {
  addCbk: async () => {
    await addNode(form.value);
    ElMessage.success('节点添加成功！');
  },
  modCbk: async () => {
    await editNode(form.value as EditNodeItem);
    ElMessage.success('节点修改成功！');
  },
  delCbk: async (nav: NavArrItem) => {
    await delNode(nav.autoid);
    ElMessage.success('节点删除成功！');
  },
  cgEffect: () => {
    tableData.value = [];
    getList();
  },
  cpEffect: (nav: NavArrItem) => {
    form.value.node_id = nav.autoid;
  }
});

/**
 * 添加节点
 */
const add = (parent: any) => {
  let parent_id = 0;
  if (typeof parent === 'object') {
    if (parent.node_type === 3) {
      form.value.is_show = 0;
    }
    parent_id = parent.autoid;
  }
  form.value.parent_id = parent_id;
  isAdd.value = true;
};

getList()
</script>
